<template>
  <div class="app-container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-position="right"
      label-width="170px"
      style="margin-left: 30px"
      class="el-form-bottom">
      <div>
        <span>微信支付信息配置</span>
        <el-divider></el-divider>
      </div>
      <el-form-item label="H5支付APPID" prop="h5Appid">
        <el-input v-model="ruleForm.h5Appid" style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="H5支付APPSECRET" prop="h5Appsecret">
        <el-input
          v-model="ruleForm.h5Appsecret"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="H5支付商户号" prop="h5MchId">
        <el-input v-model="ruleForm.h5MchId" style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="H5支付商户支付密钥" prop="h5MchKey">
        <el-input
          v-model="ruleForm.h5MchKey"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="公众号支付APPID" prop="wxAppid">
        <el-input v-model="ruleForm.wxAppid" style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="公众号支付APPSECRET" prop="wxAppsecret">
        <el-input
          v-model="ruleForm.wxAppsecret"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="公众号支付商户号" prop="wxMchId">
        <el-input v-model="ruleForm.wxMchId" style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="公众号支付商户支付密钥" prop="wxMchKey">
        <el-input
          v-model="ruleForm.wxMchKey"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="PC支付APPID" prop="pcAppid">
        <el-input v-model="ruleForm.pcAppid" style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="PC支付APPSECRET" prop="pcAppsecret">
        <el-input
          v-model="ruleForm.pcAppsecret"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="PC支付商户号" prop="pcMchId">
        <el-input v-model="ruleForm.pcMchId" style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="PC支付商户支付密钥" prop="pcMchKey">
        <el-input
          v-model="ruleForm.pcMchKey"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="APP支付APPID" prop="appAppid">
        <el-input
          v-model="ruleForm.appAppid"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="APP支付APPSecret" prop="appAppSecret">
        <el-input
          v-model="ruleForm.appAppSecret"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="APP支付商户号" prop="appMchId">
        <el-input
          v-model="ruleForm.appMchId"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="APP支付商户秘钥" prop="appMchKey">
        <el-input
          v-model="ruleForm.appMchKey"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="小程序支付APPID" prop="xcxAppid">
        <el-input
          v-model="ruleForm.xcxAppid"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="小程序支付APPSECRET" prop="xcxAppsecret">
        <el-input
          v-model="ruleForm.xcxAppsecret"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="小程序支付商户号" prop="xcxMchId">
        <el-input
          v-model="ruleForm.xcxMchId"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="小程序支付商户支付密钥" prop="xcxMchKey">
        <el-input
          v-model="ruleForm.xcxMchKey"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="服务商商户号" prop="partnerMerchantId">
        <el-input
          v-model="ruleForm.partnerMerchantId"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="服务商商户私钥" prop="partnerPrivateKey">
        <el-input
          type="textarea"
          v-model="ruleForm.partnerPrivateKey"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="服务商证书序列号" prop="partnerSerialnumber">
        <el-input
          v-model="ruleForm.partnerSerialnumber"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="服务商apiv3秘钥" prop="partnerApiV3Key">
        <el-input
          v-model="ruleForm.partnerApiV3Key"
          style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="fixed-bottom-20">
          <el-button type="primary" @click="submitForm('ruleForm')">
            立即提交
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { Message } from "element-ui";
import { toEditWxPay, EditWxPay } from "@/api/system";
export default {
  name: "wxpayconfig",
  data() {
    return {
      ruleForm: {},
      rules: {
        h5Appid: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        h5Appsecret: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        h5MchId: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        h5MchKey: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        wxAppid: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        wxAppsecret: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        wxMchId: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        wxMchKey: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        pcAppid: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        pcAppsecret: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        pcMchId: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        pcMchKey: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        appAppid: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        appAppSecret: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        appMchId: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        appMchKey: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        xcxAppid: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        xcxAppsecret: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        xcxMchId: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        xcxMchKey: [
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    toEditWxPay().then((res) => {
      this.ruleForm = res.data.data.payconfigWx;
    });
  },
  methods: {
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          EditWxPay(this.ruleForm).then((res) => {
            if (!res.data.success) {
              Message.error(res.data.message);
              return;
            }
            Message.success("操作成功");
            return;
          });
        }
      });
    },
  },
};
</script>

<style></style>
